<script setup lang="ts">
import axios from 'axios'
import { onMounted, ref } from 'vue';
import { useChannelStore } from '../store/channel';
import { Channel, ChannelResData } from './../types/data'

const store = useChannelStore()

// 1. 定义变量
const list = ref<Channel[]>([])

// 2. 请求数据
onMounted(async () => {
  const res = await axios.get<ChannelResData>('http://geek.itheima.net/v1_0/channels')
  list.value = res.data.data.channels
})



</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a @click="store.changeChannelId(item.id)" class="item" :class="{ active: store.channelId === item.id }"
        href="javascript:;" v-for="(item, index) in list" :key="item.id">
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
